<template>
	<view class="box">
		<view class="list" v-if="list.length">
			<view class="card" v-for="(item,index) of list" :key="index">
				<view class="one f-w">
					<view class="name">{{item.real_name}}</view>
					<view class="mobile f28">{{item.phone}}</view>
				</view>
				<view class="two">
					{{(  item.detail) || '暂无'}}
				</view>
				<view class="three fw-bt">
					<view class="f-w" @click="checkDefault(item)">
						<view class="icon f-w">
							<image src="https://jw.xzsw2021.com/static/img/icon_27@2x.png" mode="" v-if="item.is_default"></image>
							<image src="https://jw.xzsw2021.com/static/img/icon_28@2x.png" mode="" v-else></image>
						</view>
						<view>默认地址</view>
					</view>
					<view class="caozuo f-w">
						<view class="btn1" @click="edit(item)">编辑</view>
						<view class="btn2" @click="del(item.address_id)">删除</view>
					</view>
				</view>
			</view>
		</view>
		<view class="none" v-else>
			<view class="nimg">
				<image src="https://jw.xzsw2021.com/static/client/icon_55@2x.png" mode=""></image>
			</view>
			<view class="desc">您还没有收货地址</view>
			<view class="btn" @click="goAddDress">新建地址</view>
		</view>

		<!-- 店铺选择器 -->
		<!-- 	<view v-if="true">
			<u-picker @cancel="show = false" @confirm="sureShop" :show="show" :columns="columns" confirmColor="#22B591" keyName="name"></u-picker>
			<u-button @click="show = true">打开</u-button>
		</view> -->
		<view class="tianjiashouhuo" @click="goTJ" v-if="list.length">添加收货地址</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [], //收货地址列表
				show: false,
				columns: [
					[{
							id: 1,
							name: '南坪菜市场'
						},
						{
							id: 2,
							name: '弹子石菜市场'
						}
					]
				],
				page: 1,
				isMore: true,
			}
		},
		onReachBottom() {


		},
		onLoad() {

		},
		onShow() {
			this.getList(this.page);
		},
		mounted() {
			// this.show=true;
		},
		methods: {
			// 去添加收货地址
			goTJ() {
				uni.navigateTo({
					url: '../address-add/address-add'
				})
			},
			getList() {
				this.$request('user/address/lst', {
					limit: 100,
					page: 1
				}, 'GET').then(res => {

					this.list = res.data.list
				})

				// if (e == 1) {
				// 	this.shopList = res.data.list
				// } else {
				// 	if (res.data.list.length == 0) {
				// 		uni.showToast({
				// 			title: "暂无更多",
				// 			icon: "none"
				// 		})
				// 		return
				// 	}
				// 	let list = this.shopList
				// 	list = [...list, ...res.data.list]
				// 	this.shopList = list
				// 	this.page = e
				// }

			},
			// 新建地址
			goAddDress() {
				uni.navigateTo({
					url: '/pages/client/address-add/address-add'
				})
			},
			// 切换默认地址
			async checkDefault(item) {
				console.log(item, 'item');
				let addList = []; //地址
				//获取省信息
				let res2 = await this.$request('v2/system/city/lst/0', {}, 'GET')
				console.log(res2, '省');
				if (res2.status == 200) {
					let isShow = true;
					res2.data.forEach((ele, index) => {
						if (ele.id * 1 == item.province_id * 1) {
							isShow = false;
							return addList.push(ele);
						}
					})
					if (isShow) {
						return this.$showToast('省份信息获取失败');
					}
				}
				//获取省信息
				let res3 = await this.$request(`v2/system/city/lst/${item.province_id}`, {}, 'GET')
				console.log(res3, '市');
				if (res3.status == 200) {
					let isShow = true;
					res3.data.forEach((ele, index) => {
						if (ele.id * 1 == item.city_id * 1) {
							isShow = false;
							return addList.push(ele);
						}
					})
					if (isShow) {
						return this.$showToast('省份信息获取失败');
					}
				}

				//获取区信息
				let res1 = await this.$request(`v2/system/city/lst/${item.city_id}`, {}, 'GET')
				console.log(res1, '市');
				if (res1.status == 200) {
					let isShow = true;
					res1.data.forEach((ele, index) => {
						if (ele.id * 1 == item.district_id * 1) {
							isShow = false;
							return addList.push(ele);

						}
					})
					if (isShow) {
						return this.$showToast('区信息获取失败');
					} else {
						// 设置默认地址
						this.$request('user/address/create', {
							real_name: item.real_name,
							phone: item.phone,
							detail: item.detail,
							address_id: item.address_id,
							area: addList,
							is_default: 1, //默认地址
							longitude: item.longitude,
							latitude: item.latitude
						}, 'POST').then(res => {
							console.log(res, '默认信息');
							if (res.status * 1 == 200) {
								this.$showToast('默认地址设置成功');
								this.getList(this.page);
							}
						})
					}
				}

			},
			// 编辑
			edit(data) {
				let a = JSON.stringify(data);
				console.log(a, 'data');
				uni.navigateTo({
					url: `/pages/client/address-add/address-add?data=${a}`
				})
			},
			// 删除
			del(id) {
				let _this = this;
				uni.showModal({
					content: '确定要删除此收货地址吗？',
					success(res) {
						if (res.confirm) {
							_this.$request(`user/address/delete/${id}`, {}, 'POST').then(res => {
								console.log(res, '信息');
								if (res.status * 1 == 200) {
									_this.$showToast('删除成功')
									_this.getList(_this.page);
								}
							})
						} else {
							console.log('取消');
						}

					}
				})
			},
			// 确认店铺
			sureShop(e) {
				this.show = false;
				console.log('确认店铺', e);
				console.log(e.value);
			}
		}
	}
</script>
<style>
	page {
		/* background-color: #F5F5F5; */
	}
</style>

<style lang="scss" scoped>
	.box {
		padding-bottom: 110rpx;
		box-sizing: border-box;

		.test {
			&>view {
				padding: 10rpx 30rpx;
				border: 1rpx solid #eee;
				margin: 0 30rpx 30rpx 0;
			}
		}

		.list {
			padding: 20rpx;
			box-sizing: border-box;
			min-height: 100vh;
			background-color: #F5F5F5;

			.card {
				padding: 30rpx 30rpx;
				background-color: #fff;
				border-radius: 20rpx;

				.name {
					margin-right: 50rpx;
				}

				.two {
					margin-top: 40rpx;
					font-size: 26rpx;
				}

				.three {
					margin-top: 80rpx;
					font-size: 24rpx;

					.icon {
						margin-right: 10rpx;
						width: 30rpx;
						height: 30rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.caozuo {
						&>view {
							width: 120rpx;
							height: 45rpx;
							line-height: 45rpx;
							text-align: center;
							font-size: 24rpx;
							border-radius: 40rpx;
							border: 1rpx solid #aaa;
						}

						.btn2 {
							margin-left: 20rpx;
						}
					}
				}
			}

			&>view:not(:first-child) {
				margin-top: 20rpx;
			}
		}

		.none {
			margin-top: 188rpx;
			overflow: hidden;
			text-align: center;

			.nimg {
				margin: 0 auto;
				width: 352rpx;
				height: 352rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.desc {
				margin: 45rpx auto 68rpx;
				font-size: 30rpx;
				color: #666666;
			}

			.btn {
				margin: 0 auto;
				width: 300rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 32rpx;
				color: #fff;
				background: linear-gradient(64deg, #2BCCA5, #22B591);
				box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(20, 187, 146, 0.4);
				border-radius: 10rpx;
			}
		}

		.tianjiashouhuo {
			width: 750rpx;
			height: 100rpx;
			background: linear-gradient(64deg, #2BCCA5, #22B591);
			color: #FFFFFF;
			font-size: 32rpx;
			line-height: 100rpx;
			text-align: center;
			position: fixed;
			bottom: 0;
			left: 0;
		}
	}
</style>
